<template>
  <div class="full-height">
    <q-page class="exhibition-page">
    <header class="page-header row items-start">
      <q-breadcrumbs class="header-title" active-color="grey-7">
        <q-breadcrumbs-el class="first-breadcrumbs"  label="系统管理" />
        <q-breadcrumbs-el label="展会信息" class="text-weight-medium" />
      </q-breadcrumbs>
      <q-space />

      <!-- 添加筛选区域折叠/展开按钮 - 隐藏掉 -->
      <!-- <q-btn
      style="background-color: rgba(226, 236, 245,0.5);"
        flat
        color="primary"
        :icon="isFilterExpanded ? 'expand_less' : 'expand_more'"
        :label="isFilterExpanded ? '收起筛选' : '展开筛选'"
        class="q-mr-sm"
        @click="toggleFilterPanel"
      /> -->

      <!-- 添加筛选模态框按钮 -->
      <q-btn
        style="background-color: rgba(226, 236, 245,0.5);"
        flat
        color="primary"
        icon="filter_alt"
        label="高级筛选"
        class="q-mr-sm"
        @click="showFilterModal = true"
      />

      <!-- 1. 修改放大按钮样式和实现 -->
 
        <q-btn
        style="background-color: rgba(226, 236, 245,0.5);"
        flat
        color="primary"
        class="q-mr-sm"
        label="重置"
        padding="4px 12px"
        @click="resetSearch"
      >
        <q-icon
        style="color: rgba(57, 136, 215,1 );"
        name="refresh" class="q-ml-xs" />
      </q-btn>

      <q-btn
      style="background-color: rgba(226, 236, 245,0.5);"
      flat
        color="primary"
        class="q-mr-sm"
        label="创建"
        padding="4px 12px"
        @click="handleCreate()"
      >
        <q-tooltip>填入表单信息AI补全创建</q-tooltip>
      </q-btn>

      <q-btn
      style="background-color: rgba(226, 236, 245,0.5);"
        label="检查"
        padding="4px 12px"
        flat
        color="primary"
        class="q-mr-sm"
        @click="checkExcel"
      >
        <q-tooltip>检查Excel格式是否符合要求</q-tooltip>
        <input
          type="file"
          accept=".xlsx"
          class="hidden-input"
          ref="checkFileInput"
          @change="handleCheckFile"
        />
      </q-btn>
      <q-btn
        color="primary"
        label="导入"
        flat
        style="background-color: rgba(226, 236, 245,0.5);"
        padding="4px 12px"
        class="q-mr-sm"
        @click="importExcel"
      >
        <q-tooltip>支持.xlsx格式文件</q-tooltip>
        <input
          type="file"
          accept=".xlsx"
          class="hidden-input"
          ref="fileInput"
          @change="handleFileUpload"
        />
      </q-btn>
  

      <q-btn-dropdown
      color="primary"
      label="导出"
      flat
      style="background-color: rgba(226, 236, 245,0.5);"
      padding="4px 12px"
      class="q-mr-sm"
    >
      <!-- 下拉菜单内容 -->
      <q-list>
      <q-item clickable v-close-popup  @click="exportTXT('txt')">
          <q-item-section>
            <q-item-label>导出TXT</q-item-label>
            <q-item-label caption>导出全部数据</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="download" />
          </q-item-section>
        </q-item>
        <!-- 直接导出 -->
        <q-item clickable v-close-popup @click="exportExcel('excel')">
          <q-item-section>
            <q-item-label>导出XLSX</q-item-label>
            <q-item-label caption>导出全部数据</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="download" />
          </q-item-section>
        </q-item>

        <!-- 按行业导出 -->
        <q-item clickable v-close-popup @click="exportExcel('excel_industry')">
          <q-item-section>
            <q-item-label>按行业导出XLSX</q-item-label>
            <q-item-label caption>按行业分类导出数据</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="category" />
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>


    </header>

    <!-- 迷你统计卡片 -->
    <div class="row q-col-gutter-xs q-mb-sm stat-cards-container">
      <div class="col-6 col-sm-3">
        <q-card class="mini-stat-card no-shadow no-border">
          <q-card-section class="q-pa-xs">
            <div class="row items-center">
              <div class="col">
                <div class="text-caption text-black-7">展会总数</div>
                <div class="text-subtitle1 text-primary text-weight-medium">{{ pagination.rowsNumber || 0 }}</div>
              </div>
              <div class="col-auto">
                <q-icon name="event" size="18px" color="primary" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>

      <div class="col-6 col-sm-3" >
        <q-card class="mini-stat-card no-shadow no-border">
          <q-card-section class="q-pa-xs">
            <div class="row items-center">
              <div class="col">
                <div class="text-caption text-black-7">展会最多的城市</div>
                <div class="text-subtitle1 text-primary text-weight-medium">莫斯科</div>
              </div>
              <div class="col-auto">
                <q-icon name="verified" size="18px" color="primary" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>

      <div class="col-6 col-sm-3">
        <q-card class="mini-stat-card no-shadow no-border">
          <q-card-section class="q-pa-xs">
            <div class="row items-center">
              <div class="col">
                <div class="text-caption text-black-7">展会最多的行业</div>
                <div class="text-subtitle1 text-primary text-weight-medium">工业机械</div>
              </div>
              <div class="col-auto">
                <q-icon name="category" size="18px" color="primary" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>

      <div class="col-6 col-sm-3">
        <q-card class="mini-stat-card no-shadow no-border">
          <q-card-section class="q-pa-xs">
            <div class="row items-center">
              <div class="col">
                <div class="text-caption text-black-7">本月展会数</div>
                <div class="text-subtitle1 text-primary text-weight-medium">{{ statistics.monthlyExhibitions }}</div>
              </div>
              <div class="col-auto">
                <q-icon name="calendar_month" size="18px" color="primary" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
      
      <div class="col-24 col-sm-6" style="margin-top: 10px;">
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <q-input
              v-model="searchForm.exhibition_number"
              dense
              outlined
              label="展会编号"
              @update:model-value="debounceSearch"
              clearable
              color="primary"
              bg-color="white"
              class="search-input"
            >
              <template v-slot:append>
                <q-icon name="tag" color="primary" size="xs" />
              </template>
            </q-input>
          </div>
          <div class="col-12">
            <q-input
              v-model="searchForm.chinese_name"
              dense
              outlined
              label="中文/外文简称"
              @update:model-value="debounceSearch"
              clearable
              color="primary"
              bg-color="white"
              class="search-input"
            >
              <template v-slot:append>
                <q-icon name="search" color="primary" size="xs" />
              </template>
            </q-input>
          </div>

         
        </div>
      </div>
      
     
    </div>

    <!-- 统一所有筛选组件为蓝白调样式已移至高级筛选模态框中 -->

    <!-- Wrap the q-table in a div with the q-table-container class -->
    <div class="q-table-container q-mt-md">
      <q-table
       class="q-table-container"
        :rows="dataList"
        :columns="columns"
        row-key="exhibition_number"
        :loading="loading"
        sticky-header
        :pagination="pagination"
        flat
        binary-state-sort
        @update:pagination="loadData"
        v-model:expanded="expanded"
        hide-bottom
      >
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td auto-width>
              <q-btn
                size="sm"
                :color="isExpanded(props.row.chinese_name) ? 'grey-3' : 'white'"
                :text-color="isExpanded(props.row.chinese_name) ? 'primary' : 'grey-7'"
                round
                flat
                dense
                @click="toggleExpand(props.row.chinese_name)"
                :icon="isExpanded(props.row.chinese_name) ? 'remove' : 'add'"
                class="expansion-btn"
              />
            </q-td>
            <q-td key="exhibition_number" :props="props">
              {{ props.row.exhibition_number }}
            </q-td>
            <q-td key="industry" :props="props">
              <div :style="props.row.industry !== props.row.industry_ai ? 'background-color: #ffdddd;' : ''">
                {{ props.row.industry }}
              </div>
            </q-td>
            <q-td key="industry_ai" :props="props">
              <div :style="props.row.industry !== props.row.industry_ai ? 'background-color: #ddffdd;' : ''">
                {{ props.row.industry_ai }}
              </div>
            </q-td>
            <q-td key="exhibition_info" :props="props">
              <div class="row items-start no-wrap">
                <q-img
                  v-if="props.row.logo"
                  :src="props.row.logo.startsWith('http') ? props.row.logo : 'https://gem.ccpititc.com' + props.row.logo"
                  spinner-color="primary"
                  style="height: 50px; width: 50px; object-fit: contain; cursor: pointer;"
                  class="q-mr-sm"
                  @click="previewImage(props.row.logo)"
                />
                <div class="column">
                  <div class="text-weight-medium text-left">{{ props.row.chinese_name }}</div>
                  <div class="text-caption text-left" v-if="props.row.english_short_name">{{ props.row.english_short_name }}</div>
                </div>
              </div>
            </q-td>
            <q-td key="location" :props="props">
              <div class="text-left">
                {{ props.row.continent }} - {{ props.row.country }} - {{ props.row.city }}
              </div>
            </q-td>
            <q-td key="holding_time" :props="props">
              {{ props.row.holding_time }}
            </q-td>
            <q-td key="frequency" :props="props">
              {{ props.row.frequency }}
            </q-td>
            <q-td key="source_user" :props="props">
              {{ props.row.source_user }}
            </q-td>
            <q-td key="source" :props="props">
              {{ props.row.source }}
            </q-td>
            <q-td key="ai_checked_status" :props="props">
              <div 
                :class="`text-${getStatusColor(props.row.ai_checked_status)} text-weight-medium`"
                style="cursor: pointer;"
              >
                {{ getStatusText(props.row.ai_checked_status) }}
                <q-tooltip
                  anchor="bottom middle"
                  self="top middle"
                  :offset="[0, 8]"
                  class="bg-dark text-white"
                  style="border-radius: 4px; max-width: 250px;"
                >
                  <div class="q-pa-sm">
                    <div class="row items-center q-mb-sm">
                      <span class="text-weight-medium">
                        <span :class="`text-${getStatusColor(props.row.ai_checked_status)}`">
                          {{ getStatusText(props.row.ai_checked_status) }}
                        </span>
                      </span>
                    </div>
                    <div class="text-caption">{{ getStatusDescription(props.row.ai_checked_status) }}</div>
                  </div>
                </q-tooltip>
              </div>
            </q-td>
            <q-td key="actions" :props="props" class="actions-column">
              <div class="row no-wrap justify-end">
                <q-btn
                  flat
                  no-caps
                  label="查看"
                  class="text-action-btn q-mr-xs"
                  @click="handleView(props.row)"
                />
                <q-btn
                  flat
                  no-caps
                  label="编辑"
                  class="text-action-btn q-mr-xs"
                  @click="handleEdit(props.row)"
                />
                <q-btn
                  flat
                  no-caps
                  label="删除"
                  class="text-action-btn"
                  @click="handleDelete(props.row)"
                />
              </div>
            </q-td>
          </q-tr>
          <q-tr v-show="isExpanded(props.row.chinese_name)" :props="props">
            <q-td colspan="100%">
              <div class="q-pa-md bg-white">
                <div class="row q-col-gutter-md">
                  <!-- Left column: Original Data -->
                  <div class="col-12 col-md-12">
                    <!-- 基本信息表格 -->
                    <div class="text-weight-medium q-mb-sm">基本信息</div>
                    <q-markup-table flat bordered class="bg-white detail-table">
                      <tbody>
                        <tr >
                          <td class="text-weight-medium table-label">
                                <q-icon name="flag" size="18px" class="q-mr-xs text-primary" />
                          展会名称</td>
                          <td class="text-left wrap-cell" colspan="3">
                            <div class="text-weight-medium">{{ props.row.chinese_name }}</div>
                            <div class="text-caption q-mt-sm">外文名称：{{ props.row.english_name }}</div>
                            <div class="text-caption" v-if="props.row.english_short_name">外文简称：{{ props.row.english_short_name }}</div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                                <q-icon name="public" size="18px" class="q-mr-xs text-primary" />                   
                          所在地区</td>
                          <td class="text-left wrap-cell">
                            <div class="detail-info-row">
                              <div class="detail-info-item">
                                <span>{{ props.row.continent }}</span>
                              </div>
                              <div class="detail-info-item">
                                <span>{{ props.row.country }}</span>
                              </div>
                              <div class="detail-info-item">
                                <span>{{ props.row.city }}</span>
                              </div>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="event" size="18px" class="q-mr-xs text-primary" />
                          举办时间</td>
                          <td class="text-left wrap-cell">
                            <div>{{ props.row.holding_time }}  | {{ props.row.frequency }}</div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                                <q-icon name="location_city" size="18px" class="q-mr-xs text-primary" />
                          展馆</td>
                          <td class="text-left wrap-cell">
                            <div>{{ props.row.exhibition_hall }}</div>
                            <div class="text-caption text-grey-7">{{ props.row.exhibition_hall_english }}</div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="business" size="16px" class="q-mr-xs text-primary" />
                          主办方</td>
                        
                          <td class="text-left wrap-cell">
                            <div>{{ props.row.organizer }}</div>
                            <div class="text-caption text-grey-7">{{ props.row.organizer_en }}</div>
                          </td>
                        </tr>
                   
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="language" size="18px" class="q-mr-xs text-primary" />
                          官方网站</td>
                          <td class="text-left wrap-cell">
                            <div class="website-info">
                              <a
                                v-if="props.row.official_website"
                                :href="props.row.official_website.startsWith('http') ? formatWebsite(props.row.official_website) : 'http://' + formatWebsite(props.row.official_website)"
                                target="_blank"
                                class="text-primary text-decoration-none hover-underline"
                              >
                                {{ formatWebsite(props.row.official_website) }}
                              </a>
                              <span v-else>暂无</span>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="category" size="18px" class="q-mr-xs text-primary" />
                          行业</td>
                       
                          <td class="text-left wrap-cell">
                            <div class="industry-info" :style="props.row.industry !== props.row.industry_ai ? 'background-color: #ffdddd;' : ''">
                              {{ props.row.industry }}
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                         <q-icon name="local_shipping" size="16px" class="q-mr-xs text-primary" />
                        是否供应链重点展会</td>
                          <td class="text-left wrap-cell">
                            <div class="supply-chain-info">
                              {{ props.row.is_supply_chain_ai || '未知' }}
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                         <q-icon name="verified_user" size="16px" class="q-mr-xs text-primary" /> 
                        是否CCPIT展会</td>
                          <td class="text-left wrap-cell">
                            <div class="ccpit-info">
                              {{ props.row.is_ccpit || '未知' }}
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="inventory_2" size="18px" class="q-mr-xs text-primary" />
                          展品范围</td>
                          <td class="text-left wrap-cell">
                            <div class="text-wrap">
                              {{ formatExhibitScope(props.row.exhibit_scope) }}
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="description" size="18px" class="q-mr-xs text-primary" />
                          展会描述</td>
                          <td class="text-left wrap-cell">
                            <div class="text-wrap">
                              {{ formatDescription(props.row.description) }}
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="note" size="18px" class="q-mr-xs text-primary" />
                          备注</td>
                          <td class="text-left wrap-cell">
                            <div class="text-wrap">
                              {{ props.row.remarks || '-' }}
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </q-markup-table>
                  </div>
                  
                  <!-- Right column: AI Check -->
                  <div class="col-12 col-md-12">
                    <div class="text-weight-medium q-mb-sm">AI检查</div>
                    <q-markup-table flat bordered class="bg-white detail-table">
                      <tbody>
                        <tr >
                          <td class="text-weight-medium table-label">
                                <q-icon name="flag" size="18px" class="q-mr-xs text-primary" />
                          展会名称</td>
                          <td class="text-left wrap-cell" colspan="3">
                            <div class="text-weight-medium">
                              {{ props.row.chinese_name_ai }}
                              <q-badge v-if="props.row.chinese_name_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.chinese_name_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                            <div class="text-caption q-mt-sm">
                              外文名称：{{ props.row.english_name_ai }}
                              <q-badge v-if="props.row.english_name_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.english_name_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                            <div class="text-caption" v-if="props.row.english_short_name_ai">
                              外文简称：{{ props.row.english_short_name_ai }}
                              <q-badge v-if="props.row.english_short_name_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.english_short_name_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                                <q-icon name="public" size="18px" class="q-mr-xs text-primary" />                   
                          所在地区</td>
                          <td class="text-left wrap-cell">
                            <div class="detail-info-row">
                              <div class="detail-info-item">
                                <span>{{ props.row.continent_ai }}</span>
                                <q-badge v-if="props.row.continent_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                                <q-badge v-else-if="props.row.continent_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                              </div>
                              <div class="detail-info-item">
                                <span>{{ props.row.country_ai }}</span>
                                <q-badge v-if="props.row.country_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                                <q-badge v-else-if="props.row.country_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                              </div>
                              <div class="detail-info-item">
                                <span>{{ props.row.city_ai }}</span>
                                <q-badge v-if="props.row.city_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                                <q-badge v-else-if="props.row.city_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                              </div>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="event" size="18px" class="q-mr-xs text-primary" />
                          举办时间</td>
                          <td class="text-left wrap-cell">
                            <div>
                              {{ props.row.holding_time_ai }}
                              <q-badge v-if="props.row.holding_time_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.holding_time_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                              | {{ props.row.frequency_ai }}
                              <q-badge v-if="props.row.frequency_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.frequency_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                                <q-icon name="location_city" size="18px" class="q-mr-xs text-primary" />
                          展馆</td>
                          <td class="text-left wrap-cell">
                            <div>
                              {{ props.row.exhibition_hall_ai }}
                              <q-badge v-if="props.row.exhibition_hall_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.exhibition_hall_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                            <div class="text-caption text-grey-7">
                              {{ props.row.exhibition_hall_english_ai }}
                              <q-badge v-if="props.row.exhibition_hall_english_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.exhibition_hall_english_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="business" size="16px" class="q-mr-xs text-primary" />
                          主办方</td>
                        
                          <td class="text-left wrap-cell">
                            <div>
                              {{ props.row.organizer_ai }}
                              <q-badge v-if="props.row.organizer_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.organizer_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                            <div class="text-caption text-grey-7">
                              {{ props.row.organizer_en_ai }}
                              <q-badge v-if="props.row.organizer_en_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.organizer_en_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                          </td>
                        </tr>
                   
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="language" size="18px" class="q-mr-xs text-primary" />
                          官方网站</td>
                          <td class="text-left wrap-cell">
                            <div class="website-info">
                              <a
                                v-if="props.row.official_website_ai"
                                :href="props.row.official_website_ai.startsWith('http') ? formatWebsite(props.row.official_website_ai) : 'http://' + formatWebsite(props.row.official_website_ai)"
                                target="_blank"
                                class="text-primary text-decoration-none hover-underline"
                              >
                                {{ formatWebsite(props.row.official_website_ai) }}
                              </a>
                              <span v-else>暂无</span>
                              <q-badge v-if="props.row.official_website_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.official_website_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="category" size="18px" class="q-mr-xs text-primary" />
                          行业</td>
                       
                          <td class="text-left wrap-cell">
                            <div class="industry-info" :style="props.row.industry !== props.row.industry_ai ? 'background-color: #ddffdd;' : ''">
                              {{ props.row.industry_ai }}
                              <q-badge v-if="props.row.industry_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.industry_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                         <q-icon name="local_shipping" size="16px" class="q-mr-xs text-primary" />
                        是否供应链重点展会</td>
                          <td class="text-left wrap-cell">
                            <div class="supply-chain-info">
                              {{ props.row.is_supply_chain_ai || '未知' }}
                              <q-badge v-if="props.row.is_supply_chain_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.is_supply_chain_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                         <q-icon name="verified_user" size="16px" class="q-mr-xs text-primary" /> 
                        是否CCPIT展会</td>
                          <td class="text-left wrap-cell">
                            <div class="ccpit-info">
                              {{ props.row.is_ccpit_ai || '未知' }}
                              <q-badge v-if="props.row.is_ccpit_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.is_ccpit_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="inventory_2" size="18px" class="q-mr-xs text-primary" />
                          展品范围</td>
                          <td class="text-left wrap-cell">
                            <div class="text-wrap">
                              {{ formatExhibitScope(props.row.exhibit_scope_ai) }}
                              <q-badge v-if="props.row.exhibit_scope_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.exhibit_scope_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="description" size="18px" class="q-mr-xs text-primary" />
                          展会描述</td>
                          <td class="text-left wrap-cell">
                            <div class="text-wrap">
                              {{ formatDescription(props.row.description_ai) }}
                              <q-badge v-if="props.row.description_ai_status === 'true'" color="green" class="q-ml-xs">一致</q-badge>
                              <q-badge v-else-if="props.row.description_ai_status === 'false'" color="red" class="q-ml-xs">不一致</q-badge>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="text-weight-medium table-label">
                              <q-icon name="note" size="18px" class="q-mr-xs text-primary" />
                          备注</td>
                          <td class="text-left wrap-cell">
                            <div class="text-wrap">
                              {{ props.row.remarks || '-' }}
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </q-markup-table>
                  </div>
                 <div style="margin-bottom: 10px;opacity: 0;">1</div>
                </div>
              </div>
            </q-td>
          </q-tr>
        </template>
        <template v-slot:no-data="{ filter }">
          <div class="full-width row flex-center q-pa-md text-grey">
            <q-icon :name="filter ? 'search_off' : 'sentiment_dissatisfied'" size="2em" class="q-mr-sm" />
            <span>{{ filter ? '未找到匹配的数据' : '暂无展会数据' }}</span>
          </div>
        </template>

        <template v-slot:loading>
          <q-inner-loading showing color="primary">
            <q-spinner-dots size="50px" />
          </q-inner-loading>
        </template>
      </q-table>
    </div>

    <div class="sticky-pagination">
      <div class="row justify-between items-center q-mt-sm q-mb-xs pagination-section">
        <div class="row items-center">
          <span class="text-caption text-grey-8 q-mr-md">共 {{ pagination.rowsNumber }} 条记录</span>
          <div class="row items-center q-gutter-xs">
            <span class="text-caption text-grey-8">每页:</span>
            <q-btn-group flat class="page-size-group">
              <q-btn 
                :color="pagination.rowsPerPage === 20 ? 'primary' : 'grey-7'" 
                :class="{'selected-page-size': pagination.rowsPerPage === 20}"
                flat
                label="20" 
                size="sm" 
                dense
                padding="xs"
                @click="setPageSize(20)"
              />
              <q-btn 
                :color="pagination.rowsPerPage === 50 ? 'primary' : 'grey-7'" 
                :class="{'selected-page-size': pagination.rowsPerPage === 50}"
                flat
                label="50" 
                size="sm" 
                dense
                padding="xs"
                @click="setPageSize(50)"
              />
              <q-btn 
                :color="pagination.rowsPerPage === 100 ? 'primary' : 'grey-7'" 
                :class="{'selected-page-size': pagination.rowsPerPage === 100}"
                flat
                label="100" 
                size="sm" 
                dense
                padding="xs"
                @click="setPageSize(100)"
              />
            </q-btn-group>
            <span class="text-caption text-grey-8">条</span>
          </div>
        </div>
        <q-pagination
          v-model="pagination.page"
          color="primary"
          :max="pagesNumber"
          size="sm"
          :max-pages="6"
          boundary-numbers
          @update:model-value="onPageChange"
          class="custom-pagination"
        />
      </div>
    </div>
    </q-page>
  </div>

  <!-- 添加筛选模态框 -->
  <filter-modal
    v-model:isOpen="showFilterModal"
    :totalRecords="pagination.rowsNumber"
    :industryOptions="industryOptions.map(item => item.split(':')[0].trim())"
    :continentCounts="continentCountsMap"
    :countryCounts="countryCountsMap"
    :cityCounts="cityCountsMap"
    :industryCounts="industryCountsMap"
    @apply-filters="handleApplyFilters"
  />
</template>

<script setup>
import {onMounted, reactive,  ref, computed,h, onUnmounted, watch} from 'vue'
import { useRouter } from 'vue-router';
import { useQuasar,QBtn,QTooltip,QIcon } from 'quasar'
import { getExhibitionList, importExhibition, checkExhibition, deleteExhibition, exportExhibition,getExhibitionStatistics , 
  getExhibitionItems } from 'src/api/exhibition'
import 'echarts-wordcloud'
import { useExhibitionListStore } from 'src/stores/exhibitionList'
// Import the FilterModal component
import FilterModal from 'src/components/FilterModal.vue';


const router = useRouter();



// 添加状态描述映射
const getStatusDescription = (status) => {
  const map = {
    0: '该展会信息尚未经过AI检查',
    1: '该展会信息已通过AI检查，数据完整性和准确性良好',
    2: '该展会信息未通过AI检查，请查看详细错误说明',
    3: '该展会信息已经过人工核对',
    4: 'AI补全中',
    5: 'AI补全完成'
  }
  return map[status] || '未知状态'
}

const columns = [
  {
    name: 'expand',
    label: '',
    field: '',
    align: 'left',
    style: 'width: 30px; max-width:30px; white-space: normal',
    sticky: true,
    stickyLeft: true
  },
  {
    name: 'exhibition_number',
    align: 'left',
    label: '审批系统展会编号',
    style: 'width: 80px; max-width:80px; white-space: normal',
    field: row => row.exhibition_number
  },
  {
    name: 'industry',
    align: 'left',
    label: '行业（原始）',
    style: 'width: 120px; max-width: 120px; white-space: normal',
    field: row => row.industry
  },
  {
    name: 'industry_ai',
    align: 'left',
    label: '行业（AI）',
    style: 'width: 120px; max-width: 120px; white-space: normal',
    field: row => row.industry_ai
  },
  {
    name: 'exhibition_info',
    align: 'left',
    label: '展会信息',
    field: row => row.chinese_name,
    style: 'width: 180px; max-width: 180px; white-space: normal'
  },
  {
    name: 'location',
    align: 'left',
    label: '所在区',
    field: row => `${row.continent}-${row.country}-${row.city}`,
    style: 'width: 160px; max-width: 160px'
  },
  {
    name: 'holding_time',
    align: 'left',
    label: '举办日期',
    field: row => row.holding_time,
    style: 'width: 100px; max-width: 100px',
    sortable: true
  },
  {
    name: 'frequency',
    align: 'left',
    label: '频率',
    style: 'width: 60px; max-width: 60px',
    field: row => row.frequency
  },
  {
    name: 'source_user',
    align: 'left',
    label: '创建人',
    style: 'width: 70px; max-width: 70px',
    field: row => row.source_user
  },
  {
    name: 'source',
    align: 'left',
    label: '创建源文件',  
    style: 'width: 90px; max-width: 90px',
    field: row => row.source
  },
  {
    name: 'ai_checked_status',
    align: 'center',
    label: 'AI检查',
    field: row => row.ai_checked_status,
    style: 'width: 70px; max-width: 70px',
    format: (val) => {
      const color = getStatusColor(val);
      return h('div', { class: `text-${color} text-weight-medium` }, getStatusText(val));
    }
  },
  {
    name: 'actions',
    label: '操作',
    align: 'right',
    style: 'width: 120px',
    field: () => null,
    headerStyle: 'width: 120px',
    sticky: true,
    stickyRight: true
  }
];





// 状态颜色映射，将所有状态改为蓝色调
const getStatusColor = (status) => {
  const map = {
    0: 'grey',       // 待检查 - 灰色
    1: 'green',      // 通过 - 绿色
    2: 'red',        // 不通过 - 红色
    3: 'blue',       // 人工核对 - 蓝色
    4: 'orange',     // AI补全中 - 橙色
    5: 'teal'        // AI补全完成 - 蓝绿色
  }
  return map[status] || 'grey'
}

// 状态文本映射
const getStatusText = (status) => {
  const map = {
    0: '待检查',
    1: '已通过',
    2: '未通过',
    3: '人工核对',
    4: 'AI补全中',
    5: 'AI补全完成'
  }
  return map[status] || '未知状态'
}

// 响应式数据声明
const dataList = ref([]);
const exhibitionListStore = useExhibitionListStore()

// 修改 searchForm 的定义
const searchForm = reactive(exhibitionListStore.searchForm)

// 修改 pagination 的定义
const pagination = reactive(exhibitionListStore.pagination)

// 如果pagination没有设置默认值，则设置默认值
if (!pagination.rowsPerPage) {
  pagination.rowsPerPage = 20
}

// 方法定义
// 在 script setup 中添加搜索表单数据

const loading = ref(false);
const $q = useQuasar()
const fileInput = ref(null)
const checkFileInput = ref(null)
const pagesNumber = computed(() => Math.ceil(pagination.rowsNumber / pagination.rowsPerPage))






// 添加行业选项（这里需要根据实际情况提供选项）
const industryOptions = ref([
  "五金工具: 32",
  "仪表仪器: 5",
  "健康养老: 1",
  "光电产品: 21",
  "公共安全: 31",
  "其他: 1",
  "其他设备 / 材料: 39",
  "农业机械: 10",
  "农林牧渔: 26",
  "冷暖设备: 15",
  "办公用品: 7",
  "化工产品: 45",
  "医疗及制药设备: 55",
  "印刷包装: 28",
  "家具家居: 30",
  "家电: 7",
  "工业机械: 124",
  "工程机械: 21",
  "广告传播: 8",
  "建筑建材: 89",
  "文体娱乐: 47",
  "汽车: 41",
  "物流仓储: 26",
  "珠宝首饰: 6",
  "生活用品: 7",
  "电力及新能源设备: 64",
  "电商和交易会: 3",
  "皮革鞋包: 8",
  "礼品玩具及宠物用品: 36",
  "纺织服饰: 73",
  "综合类: 64",
  "美容美发: 17",
  "自行车电动车摩托车: 26",
  "航空航天: 4",
  "船舶和轨道等交通: 23",
  "节能环保: 18",
  "计算机通信及电子设备: 47",
  "酒店用品: 11",
  "采矿及设备: 13",
  "钟表眼镜: 7",
  "食品加工设备: 3",
  "食品饮料: 90",
  "高新材料 / 技术: 5"
]);




// 添加统计数据和图表相关的响应式数据
const statistics = reactive({
  totalExhibitions: 0,
  maxCity: '',
  maxCountry: '',
  monthlyExhibitions: 0,
  // Add properties to store filter counts
  continent: {},
  country: {},
  city: {},
  industry: {}
})





// 添加词云图相关变量
let wordCloudInstance = null


// 添加数据处理函数

// 获取统计数据
const loadStatistics = async () => {
  try {
    const res = await getExhibitionStatistics()
    if (res.data) {
      statistics.totalExhibitions = res.data.totalExhibitions
      statistics.maxCity = res.data.maxCity
      statistics.maxCountry = res.data.maxCountry
      statistics.monthlyExhibitions = res.data.monthlyExhibitions
      
      // Initialize the count data objects
      if (res.data.continent) {
        statistics.continent = res.data.continent
      }
      
      if (res.data.country) {
        statistics.country = res.data.country
      }
      
      if (res.data.city) {
        statistics.city = res.data.city
      }
      
      if (res.data.industry) {
        statistics.industry = res.data.industry
      }
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
    $q.notify({
      type: 'negative',
      message: '获取统计数据失败'
    })
  }
}

// 修改 loadData 函数
const loadData = async () => {
  try {
    loading.value = true;
    // 获取分页数据
    console.log(searchForm,"searchForm")

    // 处理行业值，从"行业: 数字"格式中提取行业名称
    let industry = searchForm.industry;
    if (industry && industry.includes(":")) {
      industry = industry.split(":")[0].trim();
    }

    const res = await getExhibitionList({
      page: pagination.page,
      pageSize: pagination.rowsPerPage,
      chinese_name: searchForm.chinese_name,
      city: searchForm.city,
      continent: searchForm.continent,
      country: searchForm.country,
      industry: industry, // 使用处理后的行业值
      exhibition_number: searchForm.exhibition_number,
      english_short_name: searchForm.chinese_name,
      is_supply_chain: searchForm.is_supply_chain,
      is_ccpit: searchForm.is_ccpit,
      // 添加时间范围参数
      date_from: searchForm?.date_range?.from,
      date_to: searchForm?.date_range?.to,
      // 添加行业与AI不一致的筛选参数
      is_industry_mismatch: searchForm.is_industry_mismatch
    });
    console.log(searchForm,"111")

    // 确保数据存在且格式正确
    if (res && res.data) {
      dataList.value = res.data.items || [];
      pagination.rowsNumber = res.data.total || 0;
      
      // 仅保存 store 中的分页和每页显示数量，让 q-table 自己处理分页
      exhibitionListStore.setPagination({
        page: pagination.page,
        rowsPerPage: pagination.rowsPerPage
      })
      
      // 保存状态
      exhibitionListStore.setSearchForm({
        chinese_name: searchForm.chinese_name,
        city: searchForm.city,
        industry: industry, // 使用处理后的行业值
        exhibition_number: searchForm.exhibition_number,
        english_short_name: searchForm.chinese_name,
        is_supply_chain: searchForm.is_supply_chain,
        is_ccpit: searchForm.is_ccpit,
        is_industry_mismatch: searchForm.is_industry_mismatch
      })
    } else {
      throw new Error('数据格式不正确');
    }
  } catch (error) {
    console.error('数据加载失败:', error);
    $q.notify({
      type: 'negative',
      message: error.response?.data?.message || '数据加载失败，请稍后重试'
    });
    // 设置默认值
    dataList.value = [];
    pagination.rowsNumber = 0;
  } finally {
    loading.value = false;
  }
};

// 更新重置方法
const resetSearch = () => {
  searchForm.chinese_name = '';
  searchForm.exhibition_number = '';
  searchForm.industry = null;
  searchForm.is_supply_chain = null;
  searchForm.is_ccpit = null;
  searchForm.date_range = null;
  searchForm.is_industry_mismatch = false;
  // 使用 clearLocation 来清除地区相关数据
  clearLocation();
};

const handleCreate = () => {
  router.push({
    path: '/exhibition/create', // 需要路由配置中定义 name
  });
};

const handleView = (row) => {
  console.log('查看:', row.code);
  router.push({
    path: `/exhibition/${row.id}/edit`,
    query: { mode: 'view' }
  });
};

const handleEdit = (row) => {
  console.log('编辑:', row.code);
  router.push({
    path: `/exhibition/${row.id}/edit`,
    query: { mode: 'edit' }
  });
};

const handleDelete = (row) => {
  $q.dialog({
    title: '确认删除',
    message: `确定要删除展会 "${row.chinese_name}" 吗？`,
    persistent: true,
    ok: {
      label: '确认',
      color: 'negative'
    },
    cancel: {
      label: '取消',
      color: 'grey'
    }
  }).onOk(async () => {
    try {
      loading.value = true
      await deleteExhibition(row.id)

      $q.notify({
        type: 'positive',
        message: '删除成功'
      })

      // 重新加载数据
      loadData()
    } catch (error) {
      console.error('删除失败:', error)
      $q.notify({
        type: 'negative',
        message: error.response?.data?.message || '删除失败，请稍后重试'
      })
    } finally {
      loading.value = false
    }
  })
}

// 触发文件选择
const importExcel = () => {
  fileInput.value.click()
}

const exportExcel = async (item) => {
  try {
    loading.value = true

    // 处理数据
    const processedData = dataList.value.map(item => ({
      ...item,
      official_website: formatWebsite(item.official_website),
      exhibit_scope: formatExhibitScope(item.exhibit_scope),
      description: formatDescription(item.description),
      remarks: item.remarks || ''
    }));

    const response = await exportExhibition(item, processedData)

    // 创建下载对话框
    $q.dialog({
      title: '',
      message: '是否下载展会数据？',
      ok: {
        label: '下载',
        color: 'primary'
      },
      cancel: {
        label: '取消',
        color: 'grey'
      }
    }).onOk(() => {
      fetch(response.data.download_url)
        .then(res => res.blob())
        .then(blob => {
          const url = window.URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.href = url
          link.download = 'exhibitions.xlsx'
          document.body.appendChild(link)
          link.click()
          window.URL.revokeObjectURL(url)
          document.body.removeChild(link)
        })
    })
  } catch (error) {
    console.error('导出失败:', error)
    $q.notify({
      type: 'negative',
      message: '导出失败，请稍后重试'
    })
  } finally {
    loading.value = false
  }
}


// 添加导出方法
const exportTXT = async (item) => {
  try {
    loading.value = true
    const response = await exportExhibition(item)

    // 创建下载对话框
    $q.dialog({
      title: '',
      message: '是否下载展会数据？',
      ok: {
        label: '下载',
        color: 'primary'
      },
      cancel: {
        label: '取消',
        color: 'grey'
      }
    }).onOk(() => {
      // 使用 fetch 获取文件内容
      fetch(response.data.download_url)
        .then(res => res.blob())
        .then(blob => {
          // 创建 blob URL
          const url = window.URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.href = url
          link.download = 'exhibitions.txt' // 使用服务器返回的文件名或默认名称
          document.body.appendChild(link)
          link.click()
          // 清理
          window.URL.revokeObjectURL(url)
          document.body.removeChild(link)
        })
    })
  } catch (error) {
    console.error('导出失败:', error)
    $q.notify({
      type: 'negative',
      message: '导出失败，请稍后重试'
    })
  } finally {
    loading.value = false
  }
}

// 处理文件上传
// 修改 handleFileUpload 函数
const handleFileUpload = async (event) => {
  const file = event.target.files[0]
  if (!file) return

  // 检查文件类型
  if (!file.name.endsWith('.xlsx')) {
    $q.notify({
      type: 'negative',
      message: '请上传.xlsx格式的文件'
    })
    return
  }

  try {
    loading.value = true
    const response = await importExhibition(file)

    // 检查响应中是否包含检查报告URL
    if (response.data.reportUrl) {
      $q.dialog({
        title: '文件导入报告',
        message: '是否下载报告？',
        ok: {
          label: '下载',
          color: 'primary'
        },
        cancel: {
          label: '取消',
          color: 'grey'
        }
      }).onOk(() => {
        // 创建一个隐藏的a标签来下载文件
        const link = document.createElement('a')
        link.href = response.data.reportUrl
        link.download = 'excel报告.xlsx'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    }

    // 如果导入成功，显示成功消息
    if (response.data.success) {
      $q.notify({

        type: 'positive',
        message: response.data.message
      })
      // 重新加载数据
      loadData()
    } else {
      $q.notify({

        type: 'warning',
        message: '请查看导入报告了解详细信息'
      })
    }
  } catch (error) {
    $q.notify({
      type: 'negative',
      message: error.response?.data?.message || '导入失败'
    })
  } finally {
    loading.value = false
    event.target.value = ''
  }
}

// 修改 handleCheckFile 函数
const handleCheckFile = async (event) => {
  const file = event.target.files[0]
  if (!file) return

  if (!file.name.endsWith('.xlsx')) {
    $q.notify({

      type: 'negative',
      message: '请上传.xlsx格式的文件'
    })
    return
  }

  try {
    loading.value = true
    const response = await checkExhibition(file)

    if (response.data.reportUrl) {
      $q.dialog({
        title: '文件检查完成',
        message: '是否下载检查报告？',
        ok: {
          label: '下载',
          color: 'warning'
        },
        cancel: {
          label: '取消',
          color: 'grey'
        }
      }).onOk(() => {
        const link = document.createElement('a')
        link.href = response.data.reportUrl
        link.download = 'excel检查报告.xlsx'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    }
  } catch (error) {
    console.log(error)
    $q.notify({

      type: 'negative',
      message: error.response?.data?.message || '检查失败'
    })
  } finally {
    loading.value = false
    event.target.value = ''
  }
}





// 在 script setup 部分添加
const onPageChange = () => {
  loadData();
};



onMounted(() => {
  // 获取地区数据
  fetchRegionData();
  // 加载展会数据
  loadData();
  loadStatistics()
  window.addEventListener('resize', handleResize)
  
  // 添加原生JS确保表头和操作列固定
  setTimeout(() => {
    setupFixedHeader();
    setupFixedActionColumn();
  }, 500);
})

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (wordCloudInstance) {
    wordCloudInstance.dispose()
  }
})

// 处理窗口大小变化
const handleResize = () => {
  if (wordCloudInstance) {
    wordCloudInstance.resize()
  }
  
  // 重新设置固定列
  setupFixedActionColumn();
};

// 设置固定表头
const setupFixedHeader = () => {
  try {
    const tableHeader = document.querySelector('.q-table thead tr');
    const tableBody = document.querySelector('.q-table tbody');
    
    if (tableHeader && tableBody) {
      // 确保表头有正确的样式
      Array.from(tableHeader.children).forEach(th => {
        th.style.position = 'sticky';
        th.style.top = '0';
        th.style.zIndex = '2';
        th.style.backgroundColor = '#fff';
        th.style.fontWeight = '600';
        th.style.color = 'var(--q-primary)';
        th.style.borderBottom = '1px solid #e0e0e0';
      });
      
      // 增加表格滚动事件监听
      const tableContainer = document.querySelector('.q-table__middle');
      if (tableContainer) {
        tableContainer.addEventListener('scroll', () => {
          const scrollTop = tableContainer.scrollTop;
          if (scrollTop > 0) {
            tableHeader.classList.add('scrolled');
          } else {
            tableHeader.classList.remove('scrolled');
          }
        });
      }
    }
  } catch (error) {
    console.error('设置固定表头失败:', error);
  }
};

// 设置固定操作列
const setupFixedActionColumn = () => {
  try {
    // 等待表格完全渲染后执行
    setTimeout(() => {
      const table = document.querySelector('.q-table');
      if (!table) return;
      
      // 获取所有操作列
      const actionCells = document.querySelectorAll('.actions-column');
      if (actionCells.length === 0) return;
      
      // 遍历所有操作列单元格，设置fixed定位
      actionCells.forEach(cell => {
        cell.style.position = 'sticky';
        cell.style.right = '0';
        cell.style.zIndex = '1';
        cell.style.backgroundColor = 'white';
        cell.style.boxShadow = '-2px 0 4px rgba(0, 0, 0, 0.1)';
      });
      
      // 获取表头中的操作列
      const headerActionCell = document.querySelector('thead tr th:last-child');
      if (headerActionCell) {
        headerActionCell.style.position = 'sticky';
        headerActionCell.style.right = '0';
        headerActionCell.style.zIndex = '3';
        headerActionCell.style.backgroundColor = 'white';
      }
      
      // 获取展开列
      const expandCells = document.querySelectorAll('td:first-child');
      if (expandCells.length > 0) {
        expandCells.forEach(cell => {
          cell.style.position = 'sticky';
          cell.style.left = '0';
          cell.style.zIndex = '1';
          cell.style.backgroundColor = 'white';
          cell.style.boxShadow = '2px 0 4px rgba(0, 0, 0, 0.1)';
        });
      }
      
      // 获取表头中的展开列
      const headerExpandCell = document.querySelector('thead tr th:first-child');
      if (headerExpandCell) {
        headerExpandCell.style.position = 'sticky';
        headerExpandCell.style.left = '0';
        headerExpandCell.style.zIndex = '3';
        headerExpandCell.style.backgroundColor = 'white';
      }
      
      // 设置表格容器的overflow样式，确保可以水平滚动
      const tableContainer = document.querySelector('.q-table__middle');
      if (tableContainer) {
        tableContainer.style.overflowX = 'auto';
        
        // 监听滚动事件，处理阴影效果
        tableContainer.addEventListener('scroll', () => {
          const scrollLeft = tableContainer.scrollLeft;
          const maxScrollLeft = tableContainer.scrollWidth - tableContainer.clientWidth;
          
          actionCells.forEach(cell => {
            if (maxScrollLeft - scrollLeft < 5) {
              cell.style.boxShadow = 'none';
            } else {
              cell.style.boxShadow = '-2px 0 4px rgba(0, 0, 0, 0.1)';
            }
          });
          
          expandCells.forEach(cell => {
            if (scrollLeft < 5) {
              cell.style.boxShadow = 'none';
            } else {
              cell.style.boxShadow = '2px 0 4px rgba(0, 0, 0, 0.1)';
            }
          });
        });
      }
    }, 100); // 减少延迟确保DOM已完全渲染
  } catch (error) {
    console.error('设置固定操作列失败:', error);
  }
};

// 监听路由变化，确保在路由变化后也能正确设置固定列
watch(() => router.currentRoute.value, () => {
  setTimeout(() => {
    setupFixedActionColumn();
  }, 200);
});

// 确保表格数据加载后重新设置固定列
watch(dataList, () => {
  setTimeout(() => {
    setupFixedActionColumn();
  }, 200);
}, { deep: true });

// 确保在初始加载后再次尝试设置固定列
onMounted(() => {
  // 获取地区数据
  fetchRegionData();
  // 加载展会数据
  loadData();
  loadStatistics()
  window.addEventListener('resize', handleResize)
  
  // 添加原生JS确保表头和操作列固定
  // 多次尝试设置以确保成功
  setTimeout(() => {
    setupFixedHeader();
    setupFixedActionColumn();
  }, 300);
  
  setTimeout(() => {
    setupFixedActionColumn();
  }, 1000);
  
  setTimeout(() => {
    setupFixedActionColumn();
  }, 2000);
});

// 触发检查文件选择
const checkExcel = () => {
  checkFileInput.value.click()
}

// 添加展开行的状态控制
const expanded = ref([]);

// 添加展开控制方法
const toggleExpand = (chineseName) => {
  const index = expanded.value.indexOf(chineseName);
  if (index === -1) {
    expanded.value = [chineseName]; // 只保留当前展开的行
  } else {
    expanded.value = []; // 关闭当前展开的行
  }
};

// 检查行是否展开
const isExpanded = (chineseName) => {
  return expanded.value.includes(chineseName);
};

// Add the previewImage method
const previewImage = (logo) => {
  const imageUrl = logo.startsWith('http') ? logo : 'https://gem.ccpititc.com' + logo;
  window.open(imageUrl, '_blank');
};

// 在 script setup 部分添加以下格式化方法
const formatWebsite = (website) => {
  if (!website) return '';
  return website.endsWith('/') ? website.slice(0, -1) : website;
};

const formatExhibitScope = (scope) => {
  if (!scope) return '';
  // 移除末尾的标点符号（包括句号、感叹号、问号等）
  return scope.replace(/[.。!！?？、，,;；]+$/, '');
};

const formatDescription = (desc) => {
  if (!desc) return '';
  // 如果末尾没有句号，则添加句号
  if (!desc.match(/[.。!！?？]$/)) {
    return desc + '。';
  }
  return desc;
};

// 添加三级级联选择的相关数据
const selectedContinent = ref('');
const selectedCountry = ref('');
const selectedCity = ref('');

// 添加regionMap变量定义
const regionMap = ref({})
const _continentOptions = computed(() => Object.keys(regionMap.value))
const countryOptions = ref({})
const cityOptions = ref({})

// 添加新的过滤相关变量 - 仅用于记录当前的过滤值，不再用于过滤选项
const continentFilter = ref('');
const countryFilter = ref('');
const cityFilter = ref('');

// 洲过滤函数
const _filterContinent = (val, update) => {
  if (val === '') {
    update(Object.keys(regionMap.value));
    return;
  }
  const needle = val.toLowerCase();
  const allContinents = Object.keys(regionMap.value);
  let filteredContinents = allContinents.filter(
    continent => continent.toLowerCase().includes(needle)
  );
  if (filteredContinents.length === 0) {
    filteredContinents = allContinents.filter(continent => {
      const continentLower = continent.toLowerCase();
      let j = 0;
      for (let i = 0; i < continentLower.length && j < needle.length; i++) {
        if (continentLower[i] === needle[j]) {
          j++;
        }
      }
      return j === needle.length;
    });
  }
  filteredContinents.sort((a, b) => {
    const aLower = a.toLowerCase();
    const bLower = b.toLowerCase();
    const aStartsWith = aLower.startsWith(needle) ? 0 : 1;
    const bStartsWith = bLower.startsWith(needle) ? 0 : 1;
    if (aStartsWith !== bStartsWith) {
      return aStartsWith - bStartsWith;
    }
    return aLower.localeCompare(bLower);
  });
  update(filteredContinents);
};

// 国家过滤函数
const _filterCountry = (val, update) => {
  if (val === '') {
    update(allCountries.value);
    return;
  }
  const needle = val.toLowerCase();
  let filteredCountries = allCountries.value.filter(
    country => country.toLowerCase().includes(needle)
  );
  if (filteredCountries.length === 0) {
    filteredCountries = allCountries.value.filter(country => {
      const countryLower = country.toLowerCase();
      let j = 0;
      for (let i = 0; i < countryLower.length && j < needle.length; i++) {
        if (countryLower[i] === needle[j]) {
          j++;
        }
      }
      return j === needle.length;
    });
  }
  filteredCountries.sort((a, b) => {
    const aLower = a.toLowerCase();
    const bLower = b.toLowerCase();
    const aStartsWith = aLower.startsWith(needle) ? 0 : 1;
    const bStartsWith = bLower.startsWith(needle) ? 0 : 1;
    if (aStartsWith !== bStartsWith) {
      return aStartsWith - bStartsWith;
    }
    return aLower.localeCompare(bLower);
  });
  update(filteredCountries);
};

// 城市过滤函数
const _filterCity = (val, update) => {
  if (val === '') {
    update(allCities.value);
    return;
  }
  const needle = val.toLowerCase();
  let filteredCities = allCities.value.filter(
    city => city.toLowerCase().includes(needle)
  );
  if (filteredCities.length === 0) {
    filteredCities = allCities.value.filter(city => {
      const cityLower = city.toLowerCase();
      let j = 0;
      for (let i = 0; i < cityLower.length && j < needle.length; i++) {
        if (cityLower[i] === needle[j]) {
          j++;
        }
      }
      return j === needle.length;
    });
  }
  filteredCities.sort((a, b) => {
    const aLower = a.toLowerCase();
    const bLower = b.toLowerCase();
    const aStartsWith = aLower.startsWith(needle) ? 0 : 1;
    const bStartsWith = bLower.startsWith(needle) ? 0 : 1;
    if (aStartsWith !== bStartsWith) {
      return aStartsWith - bStartsWith;
    }
    return aLower.localeCompare(bLower);
  });
  update(filteredCities);
};

// 监听洲的变化，重置国家和城市
watch(selectedContinent, (_newVal) => {
  if (_newVal === null || _newVal === '') {
    selectedCountry.value = '';
    selectedCity.value = '';
  }
  searchForm.continent = selectedContinent.value;
  loadData();
});

// 监听国家的变化，重置城市
watch(selectedCountry, (_newVal) => {
  if (_newVal === null || _newVal === '') {
    selectedCity.value = '';
  }
  searchForm.country = selectedCountry.value;
  loadData();
});

// 监听城市的变化
watch(selectedCity, (_newVal) => {
  searchForm.city = selectedCity.value;
  loadData();
});

// 清除地区选择
const clearLocation = () => {
  selectedContinent.value = '';
  selectedCountry.value = '';
  selectedCity.value = '';
  searchForm.continent = '';
  searchForm.country = '';
  searchForm.city = '';
  continentFilter.value = '';
  countryFilter.value = '';
  cityFilter.value = '';
  
  // 重新加载数据
  loadData();
};

// 添加获取地区数据的方法
const fetchRegionData = async () => {
  try {
    const res = await getExhibitionItems()
    if (res.data) {
      // 保存原始数据
      regionMap.value = res.data;
      
      // 设置国家和城市数据
      countryOptions.value = {}
      cityOptions.value = {}
      
      // 遍历处理数据
      Object.entries(res.data).forEach(([continent, countries]) => {
        // 设置每个大洲对应的国家列表
        countryOptions.value[continent] = Object.keys(countries)
        
        // 设置每个国家对应的城市列表
        Object.entries(countries).forEach(([country, cities]) => {
          cityOptions.value[country] = cities
        })
      })
    }
  } catch (error) {
    console.error('获取地区数据失败:', error)
    $q.notify({
      type: 'negative',
      message: '获取地区数据失败'
    })
  }
}

// 防抖函数
const debounce = (fn, delay) => {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
};

// 带防抖的搜索函数
const debounceSearch = debounce(() => {
  loadData();
}, 300);



// 添加缩放控制变量

// 添加筛选面板展开/收起控制变量
const isFilterExpanded = ref(false);

// 切换筛选面板展开/收起状态
const _toggleFilterPanel = () => {
  isFilterExpanded.value = !isFilterExpanded.value;
};

// 切换缩放状态


const setPageSize = (size) => {
  // 保存当前的滚动位置和表格相对位置
  const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
  
  // 找到表格容器元素，计算它距离视口顶部的距离
  const tableContainer = document.querySelector('.q-table-container');
  const tableTop = tableContainer ? tableContainer.getBoundingClientRect().top : 0;
  const tableScrollPosition = scrollPosition + tableTop;
  
  // 更新分页设置
  pagination.rowsPerPage = size;
  pagination.page = 1;  // 重置到第一页
  
  // 加载数据
  loadData();
  
  // 在数据加载后，恢复滚动位置，确保表格位置与之前相同
  setTimeout(() => {
    try {
      // 如果我们有表格容器参考，尝试滚动到表格保持在相同位置
      if (tableContainer) {
        const newTableTop = tableContainer.getBoundingClientRect().top;
        const newScrollPosition = tableScrollPosition - newTableTop;
        
        window.scrollTo({
          top: newScrollPosition,
          behavior: 'auto'
        });
      } else {
        // 回退到简单滚动位置恢复
        window.scrollTo({
          top: scrollPosition,
          behavior: 'auto'
        });
      }
    } catch (e) {
      console.error('恢复滚动位置出错:', e);
      // 最基本的滚动恢复方式
      window.scrollTo(0, scrollPosition);
    }
  }, 150); // 给予更多时间让DOM更新
};

// 计算属性：获取所有国家列表
const allCountries = computed(() => {
  const countries = new Set();
  
  // 遍历所有大洲下的国家
  Object.values(regionMap.value).forEach(continentCountries => {
    Object.keys(continentCountries).forEach(country => {
      countries.add(country);
    });
  });
  
  return Array.from(countries).sort();
});

// 计算属性：获取所有城市列表
const allCities = computed(() => {
  const cities = new Set();
  
  // 遍历所有国家下的城市
  Object.values(regionMap.value).forEach(continentCountries => {
    Object.values(continentCountries).forEach(countryCities => {
      countryCities.forEach(city => {
        cities.add(city);
      });
    });
  });
  
  return Array.from(cities).sort();
});

// 过滤行业列表
const _filterIndustry = (val, update) => {
  if (val === '') {
    update(() => industryOptions.value);
    return;
  }
  const needle = val.toLowerCase();
  update(() => {
    // 对每个行业字符串，提取行业名称（冒号前的部分）
    let filteredIndustries = industryOptions.value.filter(industry => {
      const industryName = industry.split(':')[0].trim().toLowerCase();
      return industryName.includes(needle);
    });
    
    // 改进的模糊搜索逻辑
    if (filteredIndustries.length === 0) {
      // 尝试查找输入字符在行业名称中的出现
      filteredIndustries = industryOptions.value.filter(industry => {
        const industryName = industry.split(':')[0].trim().toLowerCase();
        // 检查输入中的每个字符是否按顺序出现在行业名称中
        let j = 0;
        for (let i = 0; i < industryName.length && j < needle.length; i++) {
          if (industryName[i] === needle[j]) {
            j++;
          }
        }
        return j === needle.length;
      });
    }
    
    // 排序规则：首先是以搜索词开头的，其次是包含搜索词的
    filteredIndustries.sort((a, b) => {
      const aName = a.split(':')[0].trim().toLowerCase();
      const bName = b.split(':')[0].trim().toLowerCase();
      const aStarts = aName.startsWith(needle) ? 0 : 1;
      const bStarts = bName.startsWith(needle) ? 0 : 1;
      if (aStarts !== bStarts) return aStarts - bStarts;
      return aName.localeCompare(bName);
    });
    
    return filteredIndustries;
  });
};

// 在script部分添加获取国家代码的函数
// 添加国家代码映射函数
const _getCountryCode = (country) => {
  // 国家名称到ISO代码的映射，这里只添加了部分常见国家的映射
  const countryMap = {
    '中国': 'cn',
    '美国': 'us',
    '英国': 'gb',
    '法国': 'fr',
    '德国': 'de',
    '意大利': 'it',
    '日本': 'jp',
    '韩国': 'kr',
    '加拿大': 'ca',
    '澳大利亚': 'au',
    '俄罗斯': 'ru',
    '印度': 'in',
    '巴西': 'br',
    '南非': 'za',
    '埃及': 'eg',
    '阿联酋': 'ae',
    '新加坡': 'sg',
    '马来西亚': 'my',
    '泰国': 'th',
    '印度尼西亚': 'id',
    '越南': 'vn',
    '西班牙': 'es',
    '葡萄牙': 'pt',
    '荷兰': 'nl',
    '比利时': 'be',
    '瑞士': 'ch',
    '瑞典': 'se',
    '挪威': 'no',
    '芬兰': 'fi',
    '丹麦': 'dk',
    '波兰': 'pl',
    '奥地利': 'at',
    '希腊': 'gr',
    '土耳其': 'tr',
    '沙特阿拉伯': 'sa',
    '以色列': 'il',
    '墨西哥': 'mx',
    '阿根廷': 'ar',
    '智利': 'cl',
    '新西兰': 'nz'
  };
  
  // 如果找不到对应的国家代码，返回空字符串，这样就不会显示图标
  return countryMap[country] || '';
};



// 初始化
onMounted(() => {
  // 获取地区数据
  fetchRegionData();
  // 加载展会数据
  loadData();
})

// Add the modal control variable
const showFilterModal = ref(false);

// Add the filter handling function
const handleApplyFilters = (filters) => {
  // Update search form with the selected filters
  searchForm.continent = filters.continent;
  searchForm.country = filters.country;
  searchForm.city = filters.city;
  
  // Handle industry selection - find the full option with count
  if (filters.industry) {
    // Find a matching industry option by name only (ignoring the count part)
    const matchingIndustry = industryOptions.value.find(opt => 
      opt.split(':')[0].trim() === filters.industry
    );
    searchForm.industry = matchingIndustry || filters.industry;
  } else {
    searchForm.industry = null;
  }
  
  // Handle additional filters
  searchForm.is_supply_chain = filters.is_supply_chain;
  searchForm.is_ccpit = filters.is_ccpit;
  
  // Handle holding time filter
  if (filters.holding_time) {
    const now = new Date();
    const currentYear = now.getFullYear();
    const currentMonth = now.getMonth(); // 0-11
    
    // Process holding time selection
    let from, to;
    switch (filters.holding_time) {
      case '本月': {
        from = new Date(currentYear, currentMonth, 1);
        to = new Date(currentYear, currentMonth + 1, 0);
        break;
      }
      case '下月': {
        from = new Date(currentYear, currentMonth + 1, 1);
        to = new Date(currentYear, currentMonth + 2, 0);
        break;
      }
      case '本季度': {
        const currentQuarter = Math.floor(currentMonth / 3);
        from = new Date(currentYear, currentQuarter * 3, 1);
        to = new Date(currentYear, (currentQuarter + 1) * 3, 0);
        break;
      }
      case '下季度': {
        const nextQuarter = Math.floor(currentMonth / 3) + 1;
        from = new Date(currentYear, nextQuarter * 3, 1);
        to = new Date(currentYear, (nextQuarter + 1) * 3, 0);
        break;
      }
    }
    
    // Set date range in searchForm
    if (from && to) {
      searchForm.date_range = {
        from: from.toISOString().split('T')[0],
        to: to.toISOString().split('T')[0]
      };
    }
  } else {
    searchForm.date_range = null;
  }
  
  // Set AI mismatch filter
  searchForm.is_industry_mismatch = filters.is_industry_mismatch;
  
  // Trigger search with new filters
  debounceSearch();
};

// Computed maps for filter counts
const continentCountsMap = computed(() => {
  const result = {};
  if (statistics && statistics.continent) {
    Object.keys(statistics.continent).forEach(key => {
      result[key] = statistics.continent[key];
    });
  }
  return result;
});

const countryCountsMap = computed(() => {
  const result = {};
  if (statistics && statistics.country) {
    Object.keys(statistics.country).forEach(key => {
      result[key] = statistics.country[key];
    });
  }
  return result;
});

const cityCountsMap = computed(() => {
  const result = {};
  if (statistics && statistics.city) {
    Object.keys(statistics.city).forEach(key => {
      result[key] = statistics.city[key];
    });
  }
  return result;
});

const industryCountsMap = computed(() => {
  const result = {};
  if (statistics && statistics.industry) {
    Object.keys(statistics.industry).forEach(key => {
      result[key] = statistics.industry[key];
    });
  }
  return result;
});

</script>
<style lang="scss">
  .expansion-btn {
    border: 1px solid #e0e0e0;
    box-shadow: none;
    transition: all 0.2s ease;
    
    &:hover {
      background-color: #f5f5f5 !important;
    }
  }
  
  .filter-container {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background-color: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    width: 100%;
    
    .row {
      align-items: center;
    }
  }
  
  .exhibition-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }
  
  .full-height {
    overflow: hidden;
    flex-direction: column;
  }

  // Add styles to fix scrolling with sticky pagination
  .sticky-pagination {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: white;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
    padding-top: 8px;
    margin-top: -8px;
  }

  // Keep table body scrollable
  .q-table-container {
    height: calc(100vh - 280px);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .q-table {
      flex: 1;
    }

    .q-virtual-scroll__content {
      will-change: transform;
    }
  }
  
  .page-header {
    z-index: 2;
    margin: 4px;
    flex-shrink: 0;
    .header-title {
      font-size: 14px;

      .first-breadcrumbs {
        .q-breadcrumbs__el-icon {
          font-size: 120%;
          position: relative;
          top: -1px;
        }
      }
    }
  }
  
  /* 详情表格样式 */
  .detail-table {
    box-shadow: none !important;
    border-radius: 8px;
    overflow: hidden;
    
    th, td {
      padding: 8px 12px;
    }
    
    .table-label {
      background-color: #f5f8fb !important;
      color: #637381;
      font-size: 0.9rem;
      min-width: 110px;
      width: 110px;
    }
    
    .wrap-cell {
      color: #212B36;
      font-size: 0.9rem;
    }
  }
  
  .detail-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4px;
    
    .q-icon {
      flex-shrink: 0;
      margin-top: 2px;
    }
    
    span {
      flex: 1;
    }
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .detail-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    
    .detail-info-item {
      margin-right: 8px;
      white-space: nowrap;
    }
  }
  
  .text-wrap {
    white-space: normal !important;
    word-break: break-word !important;
  }
  
  .hidden-input {
    display: none;
  }
  
  .stat-cards-container {
    flex-shrink: 0;
  }
  
  .filter-section {
    flex-shrink: 0;
  }
  
  .mini-stat-card {
    height: 60px;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .text-subtitle1 {
      font-size: 1.1rem;
      margin: 2px 0;
    }

    .text-caption {
      font-size: 0.7rem;
    }
  }
  
  // 搜索区域样式
  .search-wrapper {
    padding: 4px;
    transition: all 0.3s ease;
    overflow: hidden;
    
    &.search-collapsed {
      height: 0;
      padding: 0;
      margin: 0 !important;
    }
    
    .search-input {
      font-size: 0.8rem;
      
      :deep(.q-field__control) {
        height: 32px;
        min-height: 32px;
      }
      
      :deep(.q-field__label) {
        font-size: 0.7rem;
        top: 8px;
      }
      
      :deep(.q-field__native) {
        padding-top: 14px;
      }
    }
    
    .search-btn {
      height: 32px;
      font-size: 0.8rem;
    }
  }
  
  // 表格样式
  .exhibition-table {
    flex: 1;
    overflow: auto;
    
    :deep(.q-table__top),
    :deep(.q-table__bottom) {
      padding: 4px;
    }
    
    :deep(th) {
      font-size: 0.8rem;
      padding: 4px 8px;
    }
    
    :deep(td) {
      font-size: 0.8rem;
      padding: 4px 8px;
    }
    
    :deep(.q-table__card) {
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    // 固定右侧的操作列
    :deep(.actions-column) {
      background-color: rgba(255, 255, 255, 0.95) !important;
      backdrop-filter: blur(4px);
      z-index: 10 !important;
      position: sticky !important;
      right: 0 !important;
      box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
      border-left: 1px solid #e0e0e0;
    }
  }

  .chart-card {
    height: 300px;
    border: 1px solid #e0e0e0;
  }

  .chart-container {
    height: 250px;
    position: relative;
  }

  .hover-underline {
    &:hover {
      text-decoration: underline !important;
    }
  }

  .table-label {
    width: 100px;
    background-color: #f5f5f5;
  }

  .wrap-cell {
    padding: 8px;
    line-height: 1.4;

    .text-wrap {
      white-space: pre-wrap !important;
      word-break: break-word !important;
      width: 100%;
    }

    .scope-info,
    .description-info,
    .remarks-info,
    .error-info,
    .advice-info {
      display: block;
      padding: 6px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.02);
      white-space: pre-wrap !important;
      word-break: break-word !important;
      width: 100%;

      &:not(:last-child) {
        margin-bottom: 4px;
      }
    }
  }

  // 添加表格相关样式
  .q-markup-table {
    width: 100%;
    table-layout: fixed; // 这个属性很重要，确保列宽固定

    td {
      vertical-align: top;
    }
  }

  .table-label {
    width: 100px;
    min-width: 100px; // 确保标签列不会被压缩
    background-color: #f5f5f5;
  }

  // 展开行的样式
  .expanded-content {
    width: 100%;

    .q-markup-table {
      margin: 0;

      td {
        &:first-child {
          width: 100px;
        }

        &:last-child {
          width: calc(100% - 100px);
        }
      }
    }
  }

  .location-info, .time-info, .area-info, .contact-info, .website-info, .industry-info {
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }

  .q-chip {
    height: 24px;
  }

  .text-grey-7 {
    opacity: 0.7;
  }

  .hover-underline {
    &:hover {
      text-decoration: underline !important;
    }
  }

  // 添加新的级联选择和行业选择的样式
  .location-selector,
  .industry-selector {
    text-align: left;
    justify-content: flex-start;
    border: 1px solid rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;

    &:hover {
      background-color: rgba(0, 0, 0, 0.03);
    }
  }

  .location-card {
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    &.selected {
      border: 2px solid #1976d2;
      background-color: rgba(25, 118, 210, 0.08);
    }

    .continent-icon,
    .country-icon,
    .city-icon {
      display: flex;
      justify-content: center;
      margin-bottom: 4px;
    }
  }

  // 改进行业选择样式
  .industry-grid {
    height: 450px;
    overflow-y: auto;
    padding: 8px;

    .industry-card {
      transition: all 0.25s ease;
      height: 100%;
      border-radius: 8px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        background-color: rgba(25, 118, 210, 0.04);
      }

      &.industry-card-selected {
        background-color: #1976d2;
        color: white;
      }

      .industry-name {
        font-size: 0.9rem;
        line-height: 1.2;
      }
    }
  }

  // 处理行业文字过长时的省略样式
  .ellipsis-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // 添加旋转动画
  @keyframes rotating {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .rotating-icon {
    animation: rotating 1.5s linear infinite;
  }

  // AI处理中按钮效果
  .ai-processing-btn {
    position: relative;
    overflow: hidden;

    &:after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0) 70%
      );
      animation: pulse 2s linear infinite;
    }
  }

  @keyframes pulse {
    0% {
      transform: scale(0.8);
      opacity: 0.7;
    }
    50% {
      transform: scale(1);
      opacity: 0.3;
    }
    100% {
      transform: scale(0.8);
      opacity: 0.7;
    }
  }
  
  // 响应式调整
  @media (max-width: 600px) {
    .mini-stat-card {
      height: 50px;
    }
    
    .exhibition-table {
      :deep(th), :deep(td) {
        font-size: 0.75rem;
        padding: 2px 4px;
      }
    }
  }

  // 减少页面底部边距
  .q-page {
    padding-bottom: 0;
  }
  
  .q-pa-md {
    padding-bottom: 1px !important;
  }
  
  // 卡片去掉阴影
  .mini-stat-card.no-shadow {
    box-shadow: none !important;
    border: 1px solid #e0e0e0;
    
    &:hover {
      transform: none;
      box-shadow: none !important;
    }
  }
  
  // 放大按钮样式
  .zoom-btn {
    transition: all 0.3s ease;
    
    &:hover {
      transform: scale(1.1);
    }
  }
  
  // 表格缩放效果
  .exhibition-table {
    transition: all 0.3s ease;
  }
  
  // 缩放状态的表格
  .zoomed-table {
    font-size: 1.1em;
    
    :deep(th), :deep(td) {
      padding: 8px 12px;
    }
  }
  
  // 修改表格至底部
  .exhibition-table {
    margin-bottom: 0;
    
    :deep(.q-table__bottom) {
      padding-bottom: 0;
      min-height: auto;
    }
  }
  
  // 给筛选控件添加右边距，避免贴在一起
  .q-pr-md {
    padding-right: 12px;
  }
  
  // 分页器样式
  .custom-pagination {
    :deep(.q-btn) {
      color: white;
      background-color: rgba(25, 118, 210, 0.8);
      
      &.q-btn--active {
        background-color: #1976d2;
        font-weight: bold;
      }
      
      &:hover {
        background-color: #1976d2;
      }
    }
  }
  
  // 改进筛选区域布局
  .filter-container {
    display: flex;
    flex-wrap: nowrap;  // 防止换行
    gap: 8px;  
    padding: 8px 0;
    overflow-x: auto;  // 允许在小屏幕上横向滚动
    -webkit-overflow-scrolling: touch; // 提升移动设备滚动体验
    scrollbar-width: thin;
    
    .filter-item {
      flex-shrink: 0;  // 防止项目被压缩
      min-width: auto;
    }
  }
  
  // 统一所有筛选按钮样式为蓝白调
  .filter-btn {
    background-color: #1976d2 !important;
    color: white !important;
    border: none !important;
    height: 32px;
    text-transform: none;
    font-weight: normal;
    
    &:hover {
      background-color: #1565c0 !important;
    }
  }
  
  // 放大状态的表格样式（作为备用）
  .zoomed-table {
    font-size: 1.3em !important;
    
    :deep(th), :deep(td) {
      padding: 12px 16px !important;
      font-size: 1.2em !important;
    }
    
    :deep(.q-btn) {
      font-size: 1.1em !important;
    }
  }
  
  // 放大按钮样式
  .zoom-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    
    &:hover {
      transform: scale(1.05);
      background-color: #1565c0 !important;
    }
    
    &:active {
      transform: scale(0.98);
    }
  }
  
  /* 添加筛选按钮的样式 */
  .filter-select-btn {
    width: 100%;
    height: 32px;
    background-color: white !important;
    color: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.24) !important;
    border-radius: 4px;
    text-align: left;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
    
    &:hover {
      background-color: #f5f5f5 !important;
      border-color: rgba(0, 0, 0, 0.4) !important;
    }
    
    .q-icon {
      position: absolute;
      right: 8px;
      color: #1976d2 !important;
    }
  }

  // Text action buttons
  .text-action-btn {
    color: #1976d2;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    position: relative;
    padding: 4px 8px;
    
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 8px;
      right: 8px;
      height: 1px;
      background-color: #1976d2;
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }
    
    &:hover:after {
      transform: scaleX(1);
    }
  }

  .search-collapsed {
    transition: all 0.3s ease;
    height: 0;
    overflow: hidden;
  }

  .filter-slide-enter-active,
  .filter-slide-leave-active {
    transition: all 0.3s ease;
    max-height: 150px;
  }

  .filter-slide-enter-from,
  .filter-slide-leave-to {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
  }

  .pagination-section {
    flex-shrink: 0;
  }

  // 分页器样式
  .custom-pagination {
    :deep(.q-btn) {
      color: white;
      background-color: rgba(25, 118, 210, 0.8);
      
      &.q-btn--active {
        background-color: #1976d2;
        font-weight: bold;
      }
      
      &:hover {
        background-color: #1976d2;
      }
    }
  }

  /* 确保页面子组件正确布局 */
  .q-page {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    height: 90vh !important;
    overflow: hidden !important;
  }
  
  /* 确保表格容器可以适当伸缩 */
  .q-table__container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* 确保表格内容区域可以滚动 */
  .q-table__middle {
    flex: 1;
    overflow: auto;
  }
  
  /* 表头固定样式 */
  .q-table--sticky-header thead tr th {
    position: sticky !important;
    z-index: 1;
    top: 0;
    background-color: white;
    opacity: 1 !important;
  }
  
  /* 确保表头阴影效果 */
  .q-table--sticky-header thead tr:last-child th {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* 修复在虚拟滚动模式下的固定表头 */
  .q-virtual-scroll__content thead {
    z-index: 2;
    position: sticky !important;
    top: 0;
  }

  /* 添加地区选择相关样式 */
  .location-select {
    .q-field__control {
      background-color: #fff;
    }
    
    &.q-field--focused .q-field__control {
      box-shadow: 0 0 0 1px rgba(0, 170, 255, 0.3);
    }
  }

  /* Location cards styling */
  .location-card {
    // ... existing code ...
  }

  /* 自定义日期选择器样式 */
  .custom-date-popup {
    min-width: 350px;
    
    .q-card {
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }
    
    .custom-date-picker {
      .q-date__header {
        background-color: var(--q-primary);
        color: white;
        padding: 16px;
        border-radius: 8px 8px 0 0;
      }
      
      .q-date__days-of-week {
        color: var(--q-primary);
        font-weight: 500;
      }
      
      .q-date__calendar-item {
        &.q-date__today {
          font-weight: 700;
          color: var(--q-primary);
        }
        
        &.q-date__active {
          background-color: var(--q-primary);
          color: white;
        }
        
        &:hover:not(.q-date__active) {
          background-color: rgba(25, 118, 210, 0.1);
        }
      }
      
      .q-date__years-content {
        .q-btn__content {
          transition: all 0.2s ease;
          
          &:hover {
            color: var(--q-primary);
            font-weight: 500;
          }
        }
      }
      
      /* 改进日期范围选择样式 */
      .q-date__range {
        &-from, &-to {
          background-color: var(--q-primary) !important;
          color: white !important;
          font-weight: 500;
          position: relative;
          
          &:before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50%;
            background-color: rgba(25, 118, 210, 0.3);
          }
        }
        
        &-from:before {
          right: 0;
        }
        
        &-to:before {
          left: 0;
        }
        
        &-inner {
          background-color: rgba(25, 118, 210, 0.3);
        }
      }
    }
    
    .q-card-actions {
      padding: 8px 16px;
    }
  }
  
  /* 国家选择下拉框样式 */
  .q-menu {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow: auto;
    
    .q-avatar {
      border: 1px solid #eee;
      border-radius: 2px;
      overflow: hidden;
      margin-right: 8px;
      
      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
    
    .q-item {
      padding: 8px 16px;
      transition: all 0.2s ease;
      
      &:hover {
        background-color: rgba(25, 118, 210, 0.05);
      }
      
      &.q-manual-focusable--focused {
        background-color: rgba(25, 118, 210, 0.1);
      }
      
      .q-item__section--avatar {
        min-width: 36px;
      }
      
      .q-item__label {
        font-size: 14px;
      }
    }
  }
  
  /* 日期输入框样式 */
  .date-input {
    .q-field__native {
      line-height: 1.2;
    }
  }
  
  /* 行业下拉选择样式 */
  .search-input {
    .q-field__control {
      background-color: white;
    }
    
    .q-field__marginal {
      height: 40px;
      color: var(--q-primary);
    }
  }

  /* AI检查结果对比卡片样式 */
  .ai-compare-card {
    height: 100%;
    border-radius: 8px;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .q-card__section {
      padding: 16px;
    }
    
    .q-list {
      padding: 0;
    }
    
    .q-item {
      padding: 4px 0;
      min-height: 32px;
    }
    
    .text-wrap {
      white-space: normal;
      word-break: break-word;
    }
  }
  
  /* 表头固定样式 */
  .my-sticky-dynamic {
    /* 设置表格容器的位置为相对定位，作为表头的参考系 */
    position: relative;
    
    /* 表头样式 */
    .q-table__top,
    .q-table__bottom,
    thead tr:first-child th {
      background-color: #fff;
      position: sticky !important;
      z-index: 2;
      font-weight: 600;
      color: var(--q-primary);
      border-bottom: 1px solid #e0e0e0;
      
      &:before {
        content: '';
        position: absolute;
        right: 0;
        left: 0;
        height: 1px;
        bottom: 0;
        background: #e0e0e0;
      }
    }
    
    /* 为表格添加简约格线 */
    td, th {
      border: 1px solid #f0f0f0;
    }
    
    .q-table__top {
      top: 0;
      z-index: 3;
    }
    
    thead tr:first-child th {
      top: 0;
      z-index: 1;
    }
    
    thead tr:first-child th:first-child {
      z-index: 2;
    }
    
    /* 确保滚动条显示 */
    .q-table__middle {
      max-height: 500px;
      overflow: auto;
    }
    
    /* 固定操作列在右侧 */
    .actions-column {
      position: sticky !important;
      right: 0;
      z-index: 1;
      background-color: white;
      box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
      
      /* 操作列横向压缩时的样式 */
      @media (max-width: 1200px) {
        width: 120px;
        min-width: 120px;
        
        .text-action-btn {
          padding: 4px;
          font-size: 12px;
        }
      }
      
      @media (max-width: 768px) {
        width: 100px;
        min-width: 100px;
        
        .text-action-btn {
          padding: 2px;
          font-size: 11px;
        }
      }
    }
  }
  
  /* 确保表头在虚拟滚动模式下也能固定 */
  .q-virtual-scroll__content {
    thead {
      tr:first-child th {
        position: sticky !important;
        top: 0;
        z-index: 2;
        background: white;
        font-weight: 600;
        color: var(--q-primary);
      }
    }
  }
  
  /* 子表格统一样式 */
  .q-pa-md {
    background-color: white !important;
  }
  
  /* 修改操作列和展开列的固定样式 */
  .my-sticky-dynamic {
    /* 设置表格容器的位置为相对定位，作为表头的参考系 */
    position: relative;
    
    /* 操作列固定在右侧 */
    .actions-column {
      position: sticky !important;
      right: 0 !important;
      z-index: 1 !important;
      background-color: white !important;
      box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* 展开列固定在左侧 */
    td:first-child, th:first-child {
      position: sticky !important;
      left: 0 !important;
      z-index: 1 !important;
      background-color: white !important;
      box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05) !important;
    }
    
    /* 表头中的操作列和展开列需要更高的z-index */
    thead th:first-child {
      z-index: 3 !important;
    }
    
    thead th:last-child {
      z-index: 3 !important;
    }
    
    /* 确保滚动条显示 */
    .q-table__middle {
      overflow-x: auto !important;
    }
  }
  
  /* 修改AI检查表格样式，确保与子表格一致 */
  .q-markup-table.detail-table {
    width: 100%;
    border-collapse: collapse;
    
    th, td {
      padding: 8px 12px;
      border: 1px solid #f0f0f0;
    }
    
    .table-label {
      background-color: #f5f8fb !important;
      color: #637381;
      font-size: 0.9rem;
      min-width: 110px;
      width: 110px;
    }
  }
  
  /* 修复AI检查结果对比部分样式 */
  .ai-compare-card {
    height: 100%;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    
    .q-card__section {
      padding: 12px;
    }
    
    .q-list {
      padding: 0;
    }
    
    .q-item {
      padding: 4px 0;
      min-height: 32px;
    }
  }
  
  /* 确保原生JS和CSS配合工作 */
  @media (max-width: 768px) {
    /* 在小屏幕上，确保操作列和展开列的样式 */
    .q-table td:first-child, 
    .q-table th:first-child,
    .q-table td:last-child, 
    .q-table th:last-child {
      position: sticky !important;
      z-index: 1 !important;
      background-color: white !important;
    }
    
    .q-table td:first-child, 
    .q-table th:first-child {
      left: 0 !important;
    }
    
    .q-table td:last-child, 
    .q-table th:last-child {
      right: 0 !important;
    }
  }
  
  /* 表头样式 */
  .q-table thead tr th {
    font-weight: 600 !important;
    color: var(--q-primary) !important;
  }
  
  /* 确保在初始加载时操作列就能固定在右侧 */
  .actions-column {
    position: sticky !important;
    right: 0 !important;
    z-index: 1 !important;
    background-color: white !important;
  }
  
  /* 选中的页面大小样式 */
  .selected-page-size {
    font-weight: 600 !important;
    border-bottom: 2px solid var(--q-primary) !important;
  }
  
  .page-size-group {
    .q-btn {
      min-width: 32px;
      border-radius: 4px;
      
      &:hover {
        background-color: rgba(25, 118, 210, 0.08);
      }
    }
  }
  
  /* 原始数据和AI检查对比样式 */
  .original-data {
    border-right: 1px solid #f0f0f0;
    padding-right: 12px;
  }
  
  /* AI检查结果表格样式 */
  .detail-table {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
    
    .q-table__top,
    .q-table__bottom {
      padding: 0;
    }
    
    th {
      font-weight: 500;
      font-size: 0.9rem;
      color: var(--q-primary);
      background-color: #f5f8fa;
      padding: 8px 16px;
    }
    
    td {
      padding: 8px 16px;
      font-size: 0.85rem;
    }
  }
  
  .table-label {
    background-color: #f5f8fa;
    color: #1976d2;
    font-size: 0.9rem;
  }
  
  .wrap-cell {
    white-space: normal;
    word-break: break-word;
  }
  
  .ai-compare-card {
    height: 100%;
    border-radius: 8px;
    transition: all 0.3s;
    
    &:hover {
      box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    }
  }
  
  .text-wrap {
    white-space: normal;
    word-break: break-word;
  }
  
  .error-info, .advice-info {
    padding: 8px 0;
  }

  // Add styles to fix scrolling issues
  .scroll-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  .fixed-header-footer {
    position: sticky;
    top: 0;
    z-index: 2;
    background: white;
  }
  
  .pagination-section {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: white;
    padding: 8px;
    border-top: 1px solid #e0e0e0;
  }

  /* 修复AI检查结果对比部分样式 */
  .ai-compare-card {
    height: 100%;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    
    .q-card__section {
      padding: 12px;
    }
    
    .q-list {
      padding: 0;
    }
    
    .q-item {
      padding: 4px 0;
      min-height: 32px;
    }
  }
  
  /* AI检查状态徽章样式 */
  .q-badge {
    font-size: 0.7rem;
    padding: 0 6px;
    border-radius: 4px;
    height: 18px;
    line-height: 18px;
    font-weight: normal;
    vertical-align: middle;
    
    &[color="green"] {
      background-color: rgba(76, 175, 80, 0.1) !important;
      color: #4caf50 !important;
      border: 1px solid #4caf50;
    }
    
    &[color="red"] {
      background-color: rgba(244, 67, 54, 0.1) !important;
      color: #f44336 !important;
      border: 1px solid #f44336;
    }
  }

  /* 确保原生JS和CSS配合工作 */
</style>
